<template>
  <div class="rank">
    <div class="rank-header ">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/user/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的排行</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="rank-myRank">
      <div class="myRank_info">
        <ul class="clearfloat">
          <li>
            <h1>{{myRank.rankSort}}</h1>
            <span>我的排名</span>
          </li>
          <li>
            <h1>{{myRank.finals_count}}</h1>
            <span>专利总数</span>
          </li>
          <li>

          </li>
          <li>
            <h1>{{myRank.invention_count}}</h1>
            <span>发明总数</span>
          </li>
          <li>
            <h1>{{myRank.orders_count}}</h1>
            <span>申报总数</span>
          </li>
        </ul>
        <div class="avatar tc">
          <el-avatar icon="el-icon-user-solid" :size="90" :src="baseUrl + '/storage/upload/' + $store.state.user.img"></el-avatar>
          <span class="nickname">{{$store.state.user.nickname}}</span>
        </div>
      </div>
      <div class="myRanl_btns">
        <!-- placeholder="请选择排名方式"  -->
        <el-select v-model="type" @change='typeChange' class="fr">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="months" @change='mothsChange' class="fr mr20 months">
          <el-option
            v-for="item in monthsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="year" @change='yearChange' class="fr mr20 year">
          <el-option :label="(thisyear - 1) + '年'" :value="thisyear - 1" :disabled="$store.state.user.vip == 0"></el-option>
          <el-option :label="thisyear + '年'" :value="thisyear"></el-option>
        </el-select>

      </div>
    </div>
    <div class="rank-list">
      <div class="list-top3">
        <div class="item top2">
          <span class="number">NO.2</span>
          <div class="item-info">
            <h1 class="nickName">{{this.rankTop3[1] ? this.rankTop3[1].nickname : '发明人昵称'}}</h1>
            <span v-if="type == 1" class="data">
              <i>专利总数：</i>
              <span>{{this.rankTop3[1] ? this.rankTop3[1].finals_count : 0 }}</span>
            </span>
            <span v-if="type == 2" class="data">
              <i>发明总数：</i>
              <span>{{this.rankTop3[1] ? this.rankTop3[1].invention_count : 0 }}</span>
            </span>
            <span v-if="type == 3" class="data">
              <i>申报总数：</i>
              <span>{{this.rankTop3[1] ? this.rankTop3[1].orders_count : 0 }}</span>
            </span>
          </div>
        </div>
        <div class="item top1">
          <span class="number">NO.1</span>
          <div class="item-info">
            <h1 class="nickName">{{this.rankTop3[0] ? this.rankTop3[0].nickname : '发明人昵称'}}</h1>
            <span v-if="type == 1" class="data">
              <i>专利总数：</i>
              <span>{{this.rankTop3[0] ? this.rankTop3[0].finals_count : 0 }}</span>
            </span>
            <span v-if="type == 2" class="data">
              <i>发明总数：</i>
              <span>{{this.rankTop3[0] ? this.rankTop3[0].invention_count : 0 }}</span>
            </span>
            <span v-if="type == 3" class="data">
              <i>申报总数：</i>
              <span>{{this.rankTop3[0] ? this.rankTop3[0].orders_count : 0 }}</span>
            </span>
          </div>
        </div>
        <div class="item top3">
          <span class="number">NO.3</span>
          <div class="item-info">
            <h1 class="nickName">{{this.rankTop3[2] ? this.rankTop3[2].nickname : '发明人昵称'}}</h1>
            <span v-if="type == 1" class="data">
              <i>专利总数：</i>
              <span>{{this.rankTop3[2] ? this.rankTop3[2].finals_count : 0 }}</span>
            </span>
            <span v-if="type == 2" class="data tc">
              <i>发明总数：</i>
              <span>{{this.rankTop3[2] ? this.rankTop3[2].invention_count : 0 }}</span>
            </span>
            <span v-if="type == 3" class="data">
              <i>申报总数：</i>
              <span>{{this.rankTop3[2] ? this.rankTop3[2].orders_count : 0 }}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="list-top7">
        <template v-if="rankTop7.length">
          <div class="item" v-for="(item,index) in rankTop7" :key='index'>
            <el-row>
              <el-col :span="3" class='tc'>
                <span class="bold i">{{index+4}}</span>
              </el-col>
              <el-col :span="18" class='tc'>
                <span v-if="item.nickname">{{item.nickname}}</span>
                <span v-else>发明人昵称</span>
              </el-col>
              <el-col :span="3" class='tc'>
                <template v-if='type == 1'>
                  <span class="bold i">{{item.finals_count}}</span>
                </template>
                <template v-else-if='type == 2'>
                  <span class="bold i">{{item.invention_count}}</span>
                </template>
                <template v-else-if='type == 3'>
                  <span class="bold i">{{item.orders_count}}</span>
                </template>
              </el-col>
            </el-row>
          </div>
        </template>
        <div v-else>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      baseUrl: global.baseurl,
      typeOptions: [
        {
          label: '专利总数',
          value: 1
        },
        {
          label: '发明总数',
          value: 2
        },
        {
          label: '申报总数',
          value: 3
        },
      ],
      type: 1,
      months: 1,
      year: null,
      monthsOptions: [
        {
          label: '1月',
          value: 1
        },
        {
          label: '2月',
          value: 2
        },
        {
          label: '3月',
          value: 3
        },
        {
          label: '4月',
          value: 4
        },
        {
          label: '5月',
          value: 5
        },
        {
          label: '6月',
          value: 6
        },
        {
          label: '7月',
          value: 7
        },
        {
          label: '8月',
          value: 8
        },
        {
          label: '9月',
          value: 9
        },
        {
          label: '10月',
          value: 10
        },
        {
          label: '11月',
          value: 11
        },
        {
          label: '12月',
          value: 12
        },
      ],
      yearOptions: [],
      tableData: [],
      myRank: {},
      thisyear: null,
      rankTop3:[],
      rankTop7: [],
      loading: {},
      // rankTop4: []
    }
  },
  created () {
    let month = moment().month() + 1
    let year = moment().year()
    this.months = month
    this.thisyear = year
    this.year = year
  
    let params = {
      months: month,
      year: year,
      type: this.type
    }
    this.getTableData(params)
    
  },
  methods: {
    isloading(type) {
      this.loading = this.$loading({
        lock: true,
        text: '数据加载中。。。',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,.9)',
        target: document.querySelector('.rank-list')
      })
    },
    typeChange (value) {
      let params = {
        type: value,
        year: this.year,
        months: this.months
      }
      // 排序字段
      if(value == 1){
        params.sort_str = 'finals_count'
      } else if(value == 2){
        params.sort_str = 'invention_count'
      } else {
        params.sort_str = 'orders_count'
      }
      this.rankTop7 = []
      this.getTableData(params)
    },
    mothsChange (value) {
      let params = {
        months: value,
        year: this.year,
        type: this.type
      }
      // 排序字段
      if(this.type == 1){
        params.sort_str = 'finals_count'
      } else if(this.type == 2){
        params.sort_str = 'invention_count'
      } else {
        params.sort_str = 'orders_count'
      }
      this.rankTop7 = []
      this.getTableData(params)
    },
    yearChange (value) {
      let params = {
        year: value,
        months: this.months,
        type: this.type
      }
      // 排序字段
      if(this.type == 1){
        params.sort_str = 'finals_count'
      } else if(this.type == 2){
        params.sort_str = 'invention_count'
      } else {
        params.sort_str = 'orders_count'
      }
      this.rankTop7 = []
      this.getTableData(params)
    },
    getTableData(args) {
      this.tableData = []
      this.rankTop3 = []
      this.rankTop7 = []
      let params = {
      }

      if (args) {
        params = {...params, ...args}
      }
      
      this.$nextTick(() => { 
        this.isloading()
      })
      this.$axios.get('api/user/rank', {params: params}).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.sliceData(this.tableData)
          this.myRank = res.data.selfRank
          this.loading.close()
        } else {
          this.loading.close()
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center:true,
            callback: action => {
            }
          })
        }
      })
    },
    sliceData (data) {
      if (data.length >= 3) {
        this.rankTop3 = this.tableData.slice(0, 3)
        this.rankTop7 = this.tableData.slice(3)
      } else {
        this.rankTop3 = this.tableData.slice(0, this.tableData.length)
      }
    }
  }
}
</script>

<style lang='less'>
  .rank {
    width:853px;
    margin: 0 auto;
    padding: 25px 30px;
    background: #fff;
    &-header {
      height: 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child { 
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
      }
      border-bottom:2px solid #e5e5e5;
      box-sizing: border-box;
    }
    &-myRank {
      height: 270px;
      padding: 30px 0 20px 0;
      box-sizing: border-box;

      .myRank_info {
        width: 100%;
        height: 100px;
        background:linear-gradient(90deg,rgba(117,185,255,1) 0%,rgba(22,137,255,1) 100%);
        position: relative;

        ul {
          height: 45px;
          margin: -22.5px 0 0 0; 
          width: 100%;
          position: absolute;
          top: 50%;
          li {
            width: 20%;
            height: 45px;
            border-right: 1px solid rgba(255,255,255,1);

            list-style: none;
            display: block;
            float: left;
            text-align: center;

            span {
              font-size: 15px;
              color:rgba(255,255,255,1);
              opacity:0.42;
            }
            h1  {
              font-size: 22px;
              color:rgba(255,255,255,1);
              line-height: 25px;
            }
          }
          li:last-child {
            border-right: 0;
          }
          li:nth-child(2), li:nth-child(3){
            border-right: 0;
          }
        }
        .avatar {
          // height: 90px;
          // width: 90px;
          position:absolute;
          left: 50%;
          top: 43px;
          transform: translate(-50%, 0);

          .nickname {
            display: block;
            font-size:20px;
            color:rgba(75,75,75,1);
            font-weight:bold;
          }
        }
      }

      .myRanl_btns {
        margin-top: 80px;
        height: 62px;
        padding-bottom: 20px;
        width: 100%;
        box-sizing: border-box;
        border-bottom:2px solid #e5e5e5;

        .el-select {
          width: 140px;
          .el-input {
            .el-input__inner {
              border-radius: 0px;
              border:1px solid rgba(198,198,198,1);
            }
            .el-input__suffix {
              right: 19px;
              .el-input__icon {
                color: rgba(198,198,198,1);
                font-size:  17px;
              }
            }
          }
        }
        .months {
          width: 90px;
        }
        .year {
          width: 120px;
        }
      }
      
    }
    &-list {
      .list-top3 {
        height: 170px;
        position: relative;
        .item {
          background:rgba(255,255,255,1);
          box-shadow:0px 0px 18px 0px rgba(193,193,193,0.25);
          position:absolute;
          top: 50%;
          transform: translate(0, -50%);
          box-sizing: border-box;
          .number {
            display: block;
            font-style: oblique;
            font-weight: 700;
            position:absolute;
            top: 50%;
            transform: translate(0, -50%);
            
          }

          &-info {
            text-align: center;
            width: 130px;
            position:absolute;
            top: 50%;
            right: 15px;
            transform: translate(0, -50%);
            i {
              font-style: normal;
            }
            h1 {
              font-size: 20px;
              line-height:24px;
              color:rgba(50,50,50,1);
              margin-bottom: 15px;
            }
            .data {
              display: block;
              font-size: 15px;
              color:rgba(160,160,160,1);
            }
          }
        }
        .top2 {
          width:240px;
          height:100px;
          left: 5px;
          padding-left: 20px;
          .number {
            color:rgba(26,158,241,1);
            font-size:24px;
          }
          
        }
        .top1 {
          width:282px;
          height:118px;
          left: 275px;
          padding-left: 25px;
          .number {
            color:#FEBF00;
            font-size:29px;
          }
          .item-info {
            width: 155px;
            h1 {
              margin-bottom: 22px;
              font-size:24px;
              line-height:28px;
            }
            .data {
              display: block;
              font-size: 18px;
            }
          }
        }
        .top3 {
          width:203px;
          height:85px;
          left: 580px;
          padding-left: 17px;
          .number {
            color:#FF7B8E;
            font-size:21px;
          }
          .item-info {
            width: 126px;
            h1 {
              font-size:17px;
              line-height:20px;
              margin-bottom: 13px;
            }
            .data {
              display: block;
              font-size: 13px;
              text-align: right;
            }
          }
        }
      }
      .list-top7 {
        .item {

          span {
            font-size: 15px;
            color:rgba(42,42,42,1);
          }
          .el-row {
            line-height: 39px;
          }
          .i {
            font-style: oblique;
          }
        }
      }
    }
  }
</style>